<template>
  <view>
    <view class="list">
      <view class="item" :class="{active:item.active}" v-for="(item,i) in list" :key="i">
        <view class="top">
          <image :src="`/static/img/qt/coupon_${item.status == 2?1:2}.png`" class="bg"></image>
          <view class="left">
            <view class="desc" v-if="item.comId">{{ item.comName }}</view>
            <view class="desc" v-else>通用红包</view>
            <view class="sub-desc" v-if="item.needMoney == '0.00'">无门槛</view>
            <view class="sub-desc" v-else>满{{ item.needMoney }}可用</view>
          </view>
          <view class="right">
            <text>￥</text>
            <text class="num">{{ item.saleMoney }}</text>
          </view>
        </view>
        <view class="center">
          <view class="circle left"></view>
          <view class="circle right"></view>
        </view>
        <view class="bottom">
          <view class="time" >{{ !item.end  ?'':'有效期至 ' }}{{ item.endStr }}</view>
          <view class="btn" @click="showDialog(item)">使用说明</view>
        </view>
      </view>
    </view>
    <list-loading v-if="loading"/>
    <list-empty v-if="!loading && (!list || list.length == 0)"/>
    <list-load-over v-else-if=" loadOver"/>


    <my-dialog ref="dialog"/>
  </view>
</template>

<script>
import Api from "@/utils/Api";
import ListLoading from "@/components/list/loading";
import ListEmpty from "@/components/list/empty";
import ListLoadOver from "@/components/list/loadOver";
import MyDialog from "@/components/dialog";

export default {
  name: "coupon",
  components: {MyDialog, ListLoadOver, ListEmpty, ListLoading},
  data() {
    return {
      list: [],
      page: 0,
      loading: false,
      loadOver: false,
    }
  },
  onLoad() {
    this.getList();
  },
  methods: {
    showDialog(item){
      this.$refs.dialog.show(item.remark)
    },
    clear() {
      this.page = 0;
      this.list = [];
      this.loadOver = false;
      this.loading = false;
    },
    getList() {
      if(this.loadOver) return;
      this.loading = true;
      Api.getMyCouponList(++this.page).then(res => {
        this.list.push(...res)
        if (res.length < 10) this.loadOver = true;
      }).finally(() => this.loading = false)
    }
  },
  onPullDownRefresh() {
    this.clear();
    this.getList();
  },
  onReachBottom() {
    this.getList();
  },
}
</script>

<style scoped lang='scss'>
.list {
  padding: r(0 30px 30px 30px);

  .item {
    margin-top: r(30px);
    background-color: white;
    border-radius: r(12px);
    overflow: hidden;

    .top {
      color: white;
      height: r(140px);
      //background: linear-gradient(90deg, #D2D2D2 0%, #979797 100%);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: r(30px);
      position: relative;

      .bg {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        z-index: 0;
      }

      .left {
        position: relative;

        .desc {
          font-size: r(38px);
        }

        .sub-desc {
          font-size: r(28px);
          margin-top: r(8px);
        }
      }

      .right {
        position: relative;
        font-size: r(28px);

        .num {
          font-size: r(92px);
        }
      }
    }

    .center {
      position: relative;

      .circle {
        $circle-size: r(40px);
        width: $circle-size;
        height: $circle-size;
        background-color: #f7f7f7;
        border-radius: 50%;
        position: absolute;
        top: calc((-#{$circle-size}) / 2);

        &.left {
          left: calc((-#{$circle-size}) / 2);
        }

        &.right {
          right: calc((-#{$circle-size}) / 2);
        }
      }

    }

    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: r(30px);

      .time {
        color: #666666;
      }

      .btn {
        padding: r(6px 20px);
        color: #9E9E9D;
        border: 1px solid #9e9e9d;
        border-radius: r(10px);
      }
    }

    &.active {

      .top {
        //background: linear-gradient(90deg, #D4B97F 0%, #BC984C 100%);
      }

      .btn {
        color: #C09D53;
        border-color: #C09D53;
      }
    }
  }
}
</style>